<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>zy</title>
<link rel="stylesheet" th:href="@{/static/assets/libs/layui/css/layui.css}"/>
<link rel="stylesheet" th:href="@{/static/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css}"/>
<link rel="stylesheet" th:href="@{/static/module/formSelects/formSelects-v4.css}"/>
<link rel="stylesheet" th:href="@{/static/assets/css/admin.css}"/> 
<style>
header {
    width: 100%;
    height: 80px;
    background-color:white;
    position: relative;
    z-index: 3;
    line-height: 60px;
    }
    #brand {
    width: 130px !important;
    height: 52px !important;
    float: left !important;
    margin-left: 50px !important;
    margin-top: 14px !important;
	}
	#tool {
    width: 100px;
    height: 100% !important;
    float: right !important;
    font-size: 15px !important;
    color: #000 !important;
    text-align: center !important;
    line-height: 80px !important;
    margin-right: 120px !important;
	}
	
	#tool a {
    color: #000 !important;
    text-decoration: none !important;
	}
</style>
</head>



<body>
<header> 
       <a href="/" ><div id="brand" ><img src="http://192.168.0.169/yaamp/modules/ui/img/716636616143652821.png"></div></a>
             <div id="tool"><a href="https://www.crypto-coinz.net/crypto-calculator"><span>算力估算</span></a></div>
</header>

<div class="layui-card">
    <div class="layui-card-header">
   
    </div>
    
    <div class="layui-card-body">
        <div  style="text-align:center; " class="layui-form toolbar">           
            <input id="crypto-search-value" class="layui-input search-input" type="text" placeholder="Enter keywords"/>&emsp;
            <button id="crypto-btn-search" class="layui-btn layui-btn-radius layui-btn-warm"><i class="layui-icon">&#xe615;</i>Search</button>     
    </div>
   <div style="text-align: center;">
  <div class="layui-inline"> <table class="crypto-table" id="crypto-table" lay-filter="crypto-table"></table></div>  </div>
   </div>
   
    </div>  
     <div style="text-align:center; " ><a href="#"  onclick="isEn(1)" id="language_EN">English</a>/
          <a href="#"  onclick="isEn(2)" id="language_CN">Chinese</a>     </div>
 
<script type="text/html" id="logo-img-tpl">
   <div><img height="40" width="40" src="{{d.logoSrc}}" /></div>
</script>

<script type="text/html" id="name-diff-tpl">
<div>{{d.name}}&emsp;<block style='color:#393D49'>{{d.diff}}</block></div>
</script>

</body>
<script type="text/javascript" th:src="@{/static/assets/libs/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/static/assets/libs/q.js}"></script>
<script type="text/javascript" th:src="@{/static/assets/libs/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js}"></script>
<script>
    
    function www(data){
    layui.use(['laydate', 'form', 'table', 'util', 'element'], function () {
    	  var laydate = layui.laydate;
          var form = layui.form;
          var table = layui.table;
          var layer = layui.layer;
          var util = layui.util;
          var element = layui.element;
          var message={};
          
        
          
          $.ajax({
    		  url: '/crypto/message',
    		  data: {message:data},
    		  async: false,
    		  dataType: 'json',
    		  type: 'post',
    		   success: function(data){
    			   message=data;
    		   }
    	  })
    
        // 渲染表格
        table.render({
        	
        	skin: 'line', //行边框风格
         	size: 'lg',
            elem: '#crypto-table',
            url: '/crypto/list',           
            page: false,
            cols: [
            	[
            	{fixed: 'logoUrl',  width:75,   templet:'#logo-img-tpl' ,width:75,    title: ''},  // width:75,   
            	
                {field: 'name', width:250, style:'color:#FF5722; font-weight:bold;',   templet:'#name-diff-tpl', title: message.name}, //width:250,
                
                {field: 'nodes',width:100,  style:'color:#FFB800; font-weight:bold;',sort: true, title: message.nodes}, //width:100,     
                
                {field: 'price',width:100, style:'font-weight:bold;',sort: true,title: message.price},//width:100,
                
                {field: 'priceBtc',style:'font-weight:bold;',sort: true, title: message.priceBtc},
                
                {field: 'roiDays', width:125, style:'color:#5FB878; font-size:16px;font-weight:bold;', sort: true,title: message.roiDays}, //width:125,
                
                {field: 'roiYearly',style:'color:#5FB878; font-size:16px;font-weight:bold;', sort: true,title: message.roiYearly},
                
                {field: 'coinsForNode',style:'font-weight:bold;', sort: true, title: message.coinsForNode},
                
                {field: 'nodeWorth',style:'font-weight:bold;', sort: true,title: message.nodeWorth},
                
                {field: 'coinsDaily',style:'font-weight:bold;',sort: true, title: message.coinsDaily},
                
                {field: 'daily',style:'font-weight:bold; color:#FFB800;', title: message.daily,
                	templet:'<div>{{d.daily}}&emsp;/<block  style="color:#FF5722;">{{d.weekly}}</block></div>'},
                
                {field: 'monthly',style:'font-weight:bold; color:#FFB800;', title: message.monthly,
                    	templet:'<div>{{d.monthly}}&emsp;/<block style="color:#FF5722;">{{d.yearly}}</block></div>'} 	

            ]
            ],
           

        });
        
        // 搜索按钮点击事件
        $('#crypto-btn-search').click(function () {
            var search = $('#crypto-search-value').val();
            table.reload('crypto-table', {where: {search: search}});
        });
        
    });   
    }
    
    $(function(){
    	www('EN');
    })
    
    
    function isEn(data){
    	if(data == 1){
    		www('EN');
    		$('#crypto-search-value').attr('placeholder','Enter keywords');
    		$('#crypto-btn-search').html('Search');
    		$('#language_EN').html('English');
    		$('#language_CN').html('Chinese');
    	}else{
    		www('CN');
    		$('#crypto-search-value').attr('placeholder','输入关键字');
    		$('#crypto-btn-search').html('搜索');
    		$('#language_EN').html('英文');
    		$('#language_CN').html('中文');
    		
    	}
    }
    
   
</script>
</html>